<div class="page-header position-relative">
    <h1>
        Form Elements
        <small>
            <i class="icon-double-angle-right"></i>
            Common form elements and layouts
        </small>
    </h1>
</div><!--/.page-header-->

<div class="row-fluid">
<!--PAGE CONTENT BEGINS HERE-->

<form class="form-horizontal">
<div class="control-group">
    <label class="control-label" for="form-field-1">Text Field</label>

    <div class="controls">
        <input type="text" id="form-field-1" placeholder="Username"/>
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="form-field-2">Password Field</label>

    <div class="controls">
        <input type="password" id="form-field-2" placeholder="Password"/>
        <span class="help-inline">Inline help text</span>
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="form-input-readonly">Readonly field</label>

    <div class="controls">
        <input readonly="" type="text" id="form-input-readonly" value="This text field is readonly!"/>
        &nbsp; &nbsp;
        <input type="checkbox" id="id-disable-check"/>
        <label class="lbl" for="id-disable-check"> Disable it!</label>
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="form-field-4">Relative Sizing</label>

    <div class="controls">
        <input class="input-mini" type="text" id="form-field-4" placeholder=".input-mini"/>

        <div class="help-block" id="input-size-slider"></div>
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="form-field-5">Grid Sizing</label>

    <div class="controls">
        <input class="span1" type="text" id="form-field-5" placeholder=".span1"/>
        <input class="span11" type="text" placeholder=".span11"/>

        <div class="help-block" id="input-span-slider"></div>
    </div>
</div>

<div class="control-group">
    <label class="control-label">Input with Icon</label>

    <div class="controls">
									<span class="input-icon">
										<input type="text" id="form-field-icon-1"/>
										<i class="icon-leaf"></i>
									</span>

									<span class="input-icon input-icon-right">
										<input type="text" id="form-field-icon-2"/>
										<i class="icon-leaf"></i>
									</span>
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="form-field-6">Tooltip and help button</label>

    <div class="controls">
        <input class="ace-tooltip" type="text" id="form-field-6" placeholder="Tooltip on hover" title="Hello Tooltip!"
               data-placement="bottom"/>
        <span class="help-button ace-popover" data-trigger="hover" data-placement="left" data-content="More details."
              title="Popover on hover">?</span>
    </div>
</div>

<div class="form-actions">
    <button class="btn btn-info" type="submit">
        <i class="icon-ok bigger-110"></i>
        Submit
    </button>

    &nbsp; &nbsp; &nbsp;
    <button class="btn" type="reset">
        <i class="icon-undo bigger-110"></i>
        Reset
    </button>
</div>

<div class="hr"></div>

<div class="row-fluid">
<div class="span4">
    <div class="widget-box">
        <div class="widget-header">
            <h4>Text Area</h4>

											<span class="widget-toolbar">
												<a href="#" data-action="collapse">
                                                    <i class="icon-chevron-up"></i>
                                                </a>

												<a href="#" data-action="close">
                                                    <i class="icon-remove"></i>
                                                </a>
											</span>
        </div>

        <div class="widget-body">
            <div class="widget-main">
                <div class="row-fluid">
                    <label for="form-field-8">Default</label>

                    <textarea class="span12" id="form-field-8" placeholder="Default Text"></textarea>
                </div>

                <hr/>
                <div class="row-fluid">
                    <label for="form-field-9">With Character Limit</label>

                    <textarea class="span12 limited" id="form-field-9" data-maxlength="50"></textarea>
                </div>

                <hr/>
                <div class="row-fluid">
                    <label for="form-field-11">Autosize</label>

                    <textarea id="form-field-11" class="autosize-transition span12"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/span-->

<div class="span4">
    <div class="widget-box">
        <div class="widget-header">
            <h4>Masked Input</h4>

											<span class="widget-toolbar">
												<a href="#" data-action="settings">
                                                    <i class="icon-cog"></i>
                                                </a>

												<a href="#" data-action="reload">
                                                    <i class="icon-refresh"></i>
                                                </a>

												<a href="#" data-action="collapse">
                                                    <i class="icon-chevron-up"></i>
                                                </a>

												<a href="#" data-action="close">
                                                    <i class="icon-remove"></i>
                                                </a>
											</span>
        </div>

        <div class="widget-body">
            <div class="widget-main">
                <div class="row-fluid">
                    <label for="form-field-mask-1">
                        Date
                        <small class="text-success">99/99/9999</small>
                    </label>

                    <div class="input-append">
                        <input class="input-small input-mask-date" type="text" id="form-field-mask-1"/>
														<span class="btn btn-small">
															<i class="icon-calendar bigger-110"></i>
															Go!
														</span>
                    </div>
                </div>

                <hr/>
                <div class="row-fluid">
                    <label for="form-field-mask-2">
                        Phone
                        <small class="text-warning">(999) 999-9999</small>
                    </label>

                    <div class="input-prepend">
														<span class="add-on">
															<i class="icon-phone"></i>
														</span>

                        <input class="input-medium input-mask-phone" type="text" id="form-field-mask-2"/>
                    </div>
                </div>

                <hr/>
                <div class="row-fluid">
                    <label for="form-field-mask-3">
                        Product Key
                        <small class="text-error">a*-999-a999</small>
                    </label>

                    <div class="input-prepend">
														<span class="add-on">
															<i class="icon-key"></i>
														</span>

                        <input class="input-medium input-mask-product" type="text" id="form-field-mask-3"/>
                    </div>
                </div>

                <hr/>
                <div class="row-fluid">
                    <label for="form-field-mask-4">
                        Eye Script
                        <small class="text-info">~9.99 ~9.99 999</small>
                    </label>

                    <div>
                        <input class="input-medium input-mask-eyescript" type="text" id="form-field-mask-4"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/span-->

<div class="span4">
<div class="widget-box">
<div class="widget-header">
    <h4>Select Box</h4>

											<span class="widget-toolbar">
												<a href="#" data-action="settings">
                                                    <i class="icon-cog"></i>
                                                </a>

												<a href="#" data-action="reload">
                                                    <i class="icon-refresh"></i>
                                                </a>

												<a href="#" data-action="collapse">
                                                    <i class="icon-chevron-up"></i>
                                                </a>

												<a href="#" data-action="close">
                                                    <i class="icon-remove"></i>
                                                </a>
											</span>
</div>

<div class="widget-body">
<div class="widget-main">
<div class="row-fluid">
    <label for="form-field-select-1">Default</label>

    <select id="form-field-select-1">
        <option value=""></option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

<hr/>
<div class="row-fluid">
    <label for="form-field-select-2">Multiple</label>

    <select id="form-field-select-2" multiple="multiple">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

<hr/>
<div class="row-fluid">
    <label for="form-field-select-3">Chosen</label>

    <select class="chzn-select" id="form-field-select-3" data-placeholder="Choose a Country...">
        <option value=""></option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

<hr/>
<div class="row-fluid">
    <label for="form-field-select-4">Chosen Multiple</label>

    <select multiple="" class="chzn-select" id="form-field-select-4" data-placeholder="Choose a Country...">
        <option value=""></option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>
</div>
</div>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->

<div class="space-24"></div>

<h3 class="header smaller lighter blue">
    Checkboxes & Radio
    <small>All Checkboxes, Radios and Switch Buttons Are Pure CSS</small>
</h3>

<div class="row-fluid">
    <div class="span5">
        <div class="control-group">
            <label class="control-label">Checkbox</label>

            <div class="controls">
                <label>
                    <input name="form-field-checkbox" type="checkbox"/>
                    <span class="lbl"> choice 1</span>
                </label>

                <label>
                    <input name="form-field-checkbox" type="checkbox"/>
                    <span class="lbl"> choice 2</span>
                </label>

                <label>
                    <input name="form-field-checkbox" class="ace-checkbox-2" type="checkbox"/>
                    <span class="lbl"> choice 3</span>
                </label>

                <label>
                    <input name="form-field-checkbox" disabled="" type="checkbox"/>
                    <span class="lbl"> disabled</span>
                </label>
            </div>
        </div>
    </div>

    <div class="span6">
        <div class="control-group">
            <label class="control-label">Radio</label>

            <div class="controls">
                <label>
                    <input name="form-field-radio" type="radio"/>
                    <span class="lbl"> radio option 1</span>
                </label>

                <label>
                    <input name="form-field-radio" type="radio"/>
                    <span class="lbl"> radio option 2</span>
                </label>

                <label>
                    <input name="form-field-radio" type="radio"/>
                    <span class="lbl"> radio option 3</span>
                </label>

                <label>
                    <input disabled="" name="form-field-radio" type="radio"/>
                    <span class="lbl"> disabled</span>
                </label>
            </div>
        </div>
    </div>
</div>
<!--/row-->

<hr/>
<div class="control-group">
    <label class="control-label">On/Off Switches</label>

    <div class="controls">
        <div class="row-fluid">
            <div class="span3">
                <label>
                    <input name="switch-field-1" class="ace-switch" type="checkbox"/>
                    <span class="lbl"></span>
                </label>
            </div>

            <div class="span3">
                <label>
                    <input name="switch-field-1" class="ace-switch ace-switch-2" type="checkbox"/>
                    <span class="lbl"></span>
                </label>
            </div>

            <div class="span3">
                <label>
                    <input name="switch-field-1" class="ace-switch ace-switch-3" type="checkbox"/>
                    <span class="lbl"></span>
                </label>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span3">
                <label>
                    <input name="switch-field-1" class="ace-switch ace-switch-4" type="checkbox"/>
                    <span class="lbl"></span>
                </label>
            </div>

            <div class="span3">
                <label>
                    <input name="switch-field-1" class="ace-switch ace-switch-5" type="checkbox"/>
                    <span class="lbl"></span>
                </label>
            </div>

            <div class="span3">
                <label>
                    <input name="switch-field-1" class="ace-switch ace-switch-6" type="checkbox"/>
                    <span class="lbl"></span>
                </label>
            </div>

            <div class="span3">
                <label>
                    <input name="switch-field-1" class="ace-switch ace-switch-7" type="checkbox"/>
                    <span class="lbl"></span>
                </label>
            </div>
        </div>
    </div>
</div>

<hr/>
<div class="row-fluid">
    <div class="span4">
        <div class="widget-box">
            <div class="widget-header">
                <h4>Custom File Input</h4>

											<span class="widget-toolbar">
												<a href="#" data-action="collapse">
                                                    <i class="icon-chevron-up"></i>
                                                </a>

												<a href="#" data-action="close">
                                                    <i class="icon-remove"></i>
                                                </a>
											</span>
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <input type="file" id="id-input-file-1"/>
                    <input type="file" id="id-input-file-2"/>
                    <input multiple="" type="file" id="id-input-file-3"/>
                </div>
            </div>
        </div>
    </div>

    <div class="span4">
        <div class="widget-box">
            <div class="widget-header">
                <h4>jQuery UI Sliders</h4>
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <div class="row-fluid">
                        <div class="span1">
                            <div id="slider-range"></div>
                        </div>

                        <div class="span11">
                            <div id="eq">
                                <span class="ui-slider-green">77</span>
                                <span class="ui-slider-red">55</span>
                                <span class="ui-slider-purple">33</span>
                                <span class="ui-slider-orange">40</span>
                                <span class="ui-slider-dark">88</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="span4">
        <div class="widget-box">
            <div class="widget-header">
                <h4>Spinners</h4>
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <input type="text" class="input-mini" id="spinner1"/>

                    <div class="space-6"></div>

                    <input type="text" class="input-mini" id="spinner2"/>

                    <div class="space-6"></div>

                    <input type="text" class="input-mini" id="spinner3"/>
                </div>
            </div>
        </div>
    </div>
</div>

<hr/>
<div class="row-fluid">
    <div class="span4">
        <div class="widget-box">
            <div class="widget-header">
                <h4>Date Picker</h4>

											<span class="widget-toolbar">
												<a href="#" data-action="settings">
                                                    <i class="icon-cog"></i>
                                                </a>

												<a href="#" data-action="reload">
                                                    <i class="icon-refresh"></i>
                                                </a>

												<a href="#" data-action="collapse">
                                                    <i class="icon-chevron-up"></i>
                                                </a>

												<a href="#" data-action="close">
                                                    <i class="icon-remove"></i>
                                                </a>
											</span>
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <div class="row-fluid">
                        <label for="id-date-picker-1">Date Picker</label>
                    </div>

                    <div class="control-group">
                        <div class="row-fluid input-append date">
                            <input class="span10 date-picker" id="id-date-picker-1" type="text"
                                   data-date-format="dd-mm-yyyy"/>
														<span class="add-on">
															<i class="icon-calendar"></i>
														</span>
                        </div>
                    </div>

                    <hr/>
                    <div class="row-fluid">
                        <label for="id-date-range-picker-1">Date Range Picker</label>
                    </div>

                    <div class="control-group">
                        <div class="input-prepend">
														<span class="add-on">
															<i class="icon-calendar"></i>
														</span>

                            <input class="span11" type="text" name="date-range-picker" id="id-date-range-picker-1"/>
                        </div>
                    </div>

                    <hr/>
                    <div class="row-fluid">
                        <label for="timepicker1">Time Picker</label>
                    </div>

                    <div class="control-group">
                        <div class="input-append bootstrap-timepicker">
                            <input id="timepicker1" type="text" class="input-small"/>
														<span class="add-on">
															<i class="icon-time"></i>
														</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="span4">
        <div class="widget-box">
            <div class="widget-header">
                <h4>
                    <i class="icon-tint"></i>
                    Color Picker
                </h4>
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <div class="row-fluid">
                        <label for="colorpicker1">Color Picker</label>
                    </div>

                    <div class="control-group">
                        <div class="bootstrap-colorpicker">
                            <input id="colorpicker1" type="text" class="input-mini"/>
                        </div>
                    </div>

                    <hr/>
                    <label for="simple-colorpicker-1">Custom Color Picker</label>

                    <select id="simple-colorpicker-1" class="hidden">
                        <option value="#ac725e">#ac725e</option>
                        <option value="#d06b64">#d06b64</option>
                        <option value="#f83a22">#f83a22</option>
                        <option value="#fa573c">#fa573c</option>
                        <option value="#ff7537">#ff7537</option>
                        <option value="#ffad46" selected="">#ffad46</option>
                        <option value="#42d692">#42d692</option>
                        <option value="#16a765">#16a765</option>
                        <option value="#7bd148">#7bd148</option>
                        <option value="#b3dc6c">#b3dc6c</option>
                        <option value="#fbe983">#fbe983</option>
                        <option value="#fad165">#fad165</option>
                        <option value="#92e1c0">#92e1c0</option>
                        <option value="#9fe1e7">#9fe1e7</option>
                        <option value="#9fc6e7">#9fc6e7</option>
                        <option value="#4986e7">#4986e7</option>
                        <option value="#9a9cff">#9a9cff</option>
                        <option value="#b99aff">#b99aff</option>
                        <option value="#c2c2c2">#c2c2c2</option>
                        <option value="#cabdbf">#cabdbf</option>
                        <option value="#cca6ac">#cca6ac</option>
                        <option value="#f691b2">#f691b2</option>
                        <option value="#cd74e6">#cd74e6</option>
                        <option value="#a47ae2">#a47ae2</option>
                        <option value="#555">#555</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="span4">
        <div class="widget-box">
            <div class="widget-header">
                <h4>
                    <i class="icon-dashboard"></i>
                    Knob Input
                </h4>
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <div class="control-group">
                        <div class="row-fluid">
                            <div class="span6">
                                <input type="text" class="input-small knob" value="15" data-min="0" data-max="100"
                                       data-step="10" data-width="80" data-height="80" data-thickness=".2"/>
                            </div>

                            <div class="span6">
                                <input type="text" class="input-small knob" value="41" data-min="0" data-max="100"
                                       data-width="80" data-height="80" data-thickness=".2" data-fgColor="#87B87F"
                                       data-displayPrevious="true" data-angleArc="250" data-angleOffset="-125"/>
                            </div>
                        </div>

                        <div class="row-fluid">
                            <div class="span12 center">
                                <input type="text" class="input-small knob" data-min="0" data-max="10" data-width="150"
                                       data-height="150" data-thickness=".2" data-fgColor="#B8877F"
                                       data-angleOffset="90" data-cursor="true"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>

<div class="space-24"></div>
<h3 class="header smaller lighter green">Form Layouts</h3>

<div class="row-fluid">
    <div class="span5">
        <div class="widget-box">
            <div class="widget-header">
                <h4>Default</h4>
            </div>

            <div class="widget-body">
                <div class="widget-main no-padding">
                    <form>
                        <!--<legend>Form</legend>-->

                        <fieldset>
                            <label>Label name</label>

                            <input type="text" placeholder="Type something&hellip;"/>
                            <span class="help-block">Example block-level help text here.</span>

                            <label class="pull-right">
                                <input type="checkbox"/>
                                <span class="lbl"> check me out</span>
                            </label>
                        </fieldset>

                        <div class="form-actions center">
                            <button onclick="return false;" class="btn btn-small btn-success">
                                Submit
                                <i class="icon-arrow-right icon-on-right bigger-110"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="span7">
        <div class="row-fluid">
            <div class="widget-box">
                <div class="widget-header">
                    <h4>Inline Forms</h4>
                </div>

                <div class="widget-body">
                    <div class="widget-main">
                        <form class="form-inline">
                            <input type="text" class="input-small" placeholder="Email"/>
                            <input type="password" class="input-small" placeholder="Password"/>
                            <label class="checkbox">
                                <input type="checkbox"/>
                                <span class="lbl"> remember me</span>
                            </label>

                            <button onclick="return false;" class="btn btn-info btn-small">
                                <i class="icon-key bigger-110"></i>
                                Login
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="space-6"></div>

        <div class="row-fluid">
            <div class="widget-box">
                <div class="widget-header widget-header-small">
                    <h5 class="lighter">Search Form</h5>
                </div>

                <div class="widget-body">
                    <div class="widget-main">
                        <form class="form-search">
                            <input type="text" class="input-medium search-query"/>
                            <button onclick="return false;" class="btn btn-purple btn-small">
                                Search
                                <i class="icon-search icon-on-right bigger-110"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--PAGE CONTENT ENDS HERE-->
</div><!--/row-->